(function (Vue) {
    Vue.component('my-todos', {
        watch: {
            todos: {
                handler: function (newTodos, oldTodos) {
                    localStorage.setItem("todos", JSON.stringify(newTodos));
                },
                deep: true,
            },
        },
        computed: {

            remaining: function () {

                let remainTodos = this.todos.filter((v) => {
                    return !v.active;
                });
                return remainTodos.length;
            },
            filterTodos: function () {
                if (this.visibility === "all") {
                    return this.todos;
                } else if (this.visibility === "active") {
                    return this.todos.filter((v) => {
                        return !v.active;
                    });
                } else {
                    return this.todos.filter((v) => {
                        return v.active;
                    });
                }
            },
        },
        data: function () {
            return {
                content: "",
                title: "",
                allChecked: false,
                visibility: "all",
                edit_index: -1,
                todos: JSON.parse(localStorage.getItem("todos") || '[]'),
            }
        },
        methods: {

            saveTodo: function () {
                if (!this.content.trim()) {
                    alert("输入不能为空!!!");
                    return false;
                }
                this.todos.push({
                    id: Date.now(),
                    text: this.content,
                    active: false,
                });
                this.content = '';
            },
            deleteTodo: function (index) {
                this.todos.splice(index, 1);
            },
            handleAllCheck: function () {
                this.allChecked = true;
                this.todos.forEach(v => {
                    v.active = true;
                });
            },
            editTodo: function () {
                this.edit_index = index;
            },
            saveEditTodo: function (index) {
                if (!this.todos[index].text) {
                    this.todos.splice(index, 1);
                }
                this.edit_index = -1;
            },
            handleItemClick: function (visibility) {
                this.visibility = visibility;
            },
            removeCompletedTodo: function () {
                let unfinishedi_items = this.todos.filter(v=>{
                    return !v.active;
                });
                this.todos = unfinishedi_items;
            }
        },
        template: `
            <div class="app-todos-contnet">
                <div class="my-todos-header">
                    <div :class="[{'todos-header-left':true},{checkClass:allChecked}]" @click.stop="handleAllCheck">
                        <span>></span>
                    </div>
                    <div class="todos-header-right">
                        <input type="text" @keyup.enter="saveTodo" v-model="content">
                    </div>
                </div>

                <div class="my-todos-list">
                    <div class="todos-list-item" v-for="(item,index) in filterTodos">
                        <div class="list-item-left">
                            <input type="checkbox" v-model="item.active">
                        </div>
                        <div class="list-item-mid" @dblclick.stop="editTodo(index)">
                            <input type="text" :class="[{hidden_input:edit_index != index}]" @blur="saveEditTodo(index)" v-model="item.text" />
                            <span :class="[{'title':true},{hidden_input:edit_index == index},{completed:item.active}]">
                                {{item.text}}
                            </span>
                        </div>
                        <div class="list-item-right">
                            <span class="delete" @click="deleteTodo(index)">x</span>
                        </div>
                    </div>
                </div>

                <div class="my-todos-bottom">
                    <div class="todos-bottom-left">
                        剩下{{this.remaining}}项目
                    </div>
                    <div class="todos-bottom-mid">
                        <span :class="[{'bottom-mid-item':true},{active:visibility=='all'}]" @click="handleItemClick('all')">
                            All 
                        </span>
                        <span :class="[{'bottom-mid-item':true},{active:visibility=='active'}]" @click="handleItemClick('active')">
                            激活
                        </span>
                        <span :class="[{'bottom-mid-item':true},{active:visibility=='completed'}]" @click="handleItemClick('completed')">
                            完成
                        </span>
                    </div>
                    <div class="todos-bottom-right" @click.stop="removeCompletedTodo">
                        清除已完成
                    </div>
                </div>
            </div>
            
        `,

    });
})(Vue)